<template>
  <a-modal
    title="修改"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    :footer="null"
    @cancel="onClose"
    :visible="feeTableEditVisiable"
  >
    <a-card :bordered="false" class="card-area">
      <a-form :form="form" @submit="handleSubmit">
        <a-row>
          <a-col :md="12" :sm="24"
          >
            <a-form-item label="分段开始值(元、不包含)" v-bind="formItemLayout">
              <a-input
                :disabled="true"
                v-decorator="[
                'pStartValue',
                { rules: [{ required: true, message: '不能为空' , trigger: 'blur'}] },
              ]"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24"
          >
            <a-form-item label="分段结束值(元、包含)" v-bind="formItemLayout">
              <a-input v-decorator="['pEndValue', { rules: [{ required: true, message: '不能为空', trigger: 'blur' },{
                      max: 17,
                      message: '不能超过17位字符',
                    },
                    {
                      pattern: /^[0-9]+(.[0-9]{1,2})?$/,
                      message: '金额格式不正确'
                    }] },]"/>
            </a-form-item
            >
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="12" :sm="24"
          >
            <a-form-item label="分段计算方式" v-bind="formItemLayout">
              <a-select
                @change="handlerChange"
                v-decorator="[
                'pCalType',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur' }] },
              ]"
              >
                <a-select-option value="1">按比例</a-select-option>
                <a-select-option value="2">按固定金额</a-select-option>
                <a-select-option value="3">按比例+封顶值</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="分段比率(‰)" v-bind="formItemLayout">
              <a-input
                :disabled = "pFeeRateDisabled"
                v-decorator="[
                'pFeeRate',
                { rules: [{ required: !pFeeRateDisabled, message: '不能为空', trigger: 'blur' },{
                      max: 7,
                      message: '不能超过7位字符'
                    },
                    {
                      pattern: /^[0-9]+(.[0-9]{1,6})?$/,
                      message: '比率格式不正确'
                    }] },
              ]"
              />

            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="12" :sm="24"
          >
            <a-form-item label="分段比率封顶值(元)" v-bind="formItemLayout">
              <a-input
                :disabled = "pFeeRateMaxDisabled"
                v-decorator="[
                'pFeeRateMax',
                { rules: [{ required: !pFeeRateMaxDisabled, message: '不能为空', trigger: 'blur' },{
                      max: 11,
                      message: '不能超过11位字符'
                    },
                    {
                      pattern: /^[0-9]+(.[0-9]{1,6})?$/,
                      message: '金额格式不正确'
                    }] },
              ]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="分段固定值(元)" v-bind="formItemLayout">
              <a-input
                :disabled = "pValueDisabled"
                v-decorator="[
                'pValue',
                { rules: [{ required: !pValueDisabled, message: '不能为空', trigger: 'blur' },{
                      max: 11,
                      message: '不能超过11位字符'
                    },
                    {
                      pattern: /^[0-9]+(.[0-9]{1,6})?$/,
                      message: '金额格式不正确'
                    }] },
              ]"
              />

            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <div class="drawer-bootom-button">
     <a-button style="margin-right: 0.8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存</a-button
      >
    </div>
  </a-modal>
</template>
<script>

const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};
export default {
  name: "FeeTableEdit",
  props: {
    feeTableEditVisiable: {
      default: false,
    },
    index: {
      default: 0,
    },
  },
  data() {
    return {
      fee: {},
      formItemLayout,
      form: this.$form.createForm(this),
      loading: false,
      pFeeRateDisabled: false,
      pFeeRateMaxDisabled: false,
      pValueDisabled: false,
    };
  },
  methods: {
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    handlerChange(value) {
      //比例值 pFeeRate、封顶值 pFeeRateMax、固定值 pValue
      this.pFeeRateDisabled = true;
      this.pFeeRateMaxDisabled = true;
      this.pValueDisabled = true;
      if(value === '1'){
        this.pFeeRateDisabled = false;
        this.form.setFieldsValue({"pFeeRate":this.fee.pFeeRate,"pFeeRateMax":"","pValue":""});
      }
      if(value === '2'){
        this.pValueDisabled = false;
        this.form.setFieldsValue({"pFeeRate":"","pFeeRateMax":"","pValue":this.fee.pValue});
      }
      if(value === '3'){
        this.pFeeRateDisabled = false;
        this.pFeeRateMaxDisabled = false;
        this.form.setFieldsValue({"pFeeRate":this.fee.pFeeRate,"pFeeRateMax":this.fee.pFeeRateMax,"pValue":""});
      }
    },
    setFormValues({ ...list }) {
      let fields = [
        "pStartValue",
        "pEndValue",
        "pCalType",
        "pFeeRate",
        "pFeeRateMax",
        "pValue",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
      this.fee = list;
      this.handlerChange(this.fee.pCalType);
    },

    handleSubmit() {
      this.form.validateFields((err) => {
        if (!err) {
          var obj = this.form.getFieldsValue();
          Object.keys(obj).forEach((key) => {
            this.fee[key] = obj[key];
          });
          if(this.fee.pStartValue === this.fee.pEndValue || parseFloat(this.fee.pStartValue) > parseFloat(this.fee.pEndValue)){
            this.$message.error("分段结束值必须大于分段开始值");
            return;
          }
          this.$emit("success",this.fee);
        }
      });
    },
  },
  watch: {},
};
</script>
